<template>
  <el-drawer
    v-model="direction"
    title="合炉配方"
    :visible="show"
    @close="handleClose"
    size="40%"
  >
    <div>
      <el-tabs
        v-model="activeTabName"
        :tab-position="tabPosition"
        class="tabHight"
      >
        <el-tab-pane name="first" label="基础条件" v-init-screen-h="50">
          <div class="check_data">
            <div class="line_furnace">
              <!-- disabled -->
              <el-checkbox-group v-model="checkboxGroup1" size="small">
                <el-checkbox
                  :disabled="item.id == 'template'"
                  :label="item.id"
                  border
                  v-for="item in basicsList1"
                  :key="item.id"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
            <el-checkbox-group v-model="checkboxGroup2" size="small">
              <el-checkbox
                :label="item.id"
                border
                v-for="item in basicsList2"
                :key="item.id"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </el-tab-pane>
        <el-tab-pane name="first2" label="高级条件" v-init-screen-h="100">
          <div class="furnace_drawer" v-if="list.length">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item
                :title="item.name"
                :name="item.id"
                v-for="item in list"
                :key="item.id"
              >
                <template slot="title">
                  <div class="flex-x">
                    <img class="img" src="@/assets/images/S_icon.png" alt="" />
                    <span
                      :style="{
                        color:
                          item.checkList1.length || item.checkList2.length
                            ? '#409EFF'
                            : '',
                        fontSize: '15px',
                      }"
                    >
                      {{ item.name }}
                    </span>
                    <span style="margin: 0 4px; color: #999">
                      版本: {{ item.version }}
                    </span>
                    <span style="color: #999"> 负责人: {{ item.author }} </span>
                  </div>
                </template>
                <div style="margin-bottom: 10px">
                  <div style="font-size: 14px">主工艺条件</div>
                  <el-checkbox-group v-model="item.checkList1">
                    <el-checkbox
                      :label="index"
                      v-for="(data, index) in item.technologyParameter"
                      :key="data.key"
                      >{{ data.key }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
                <div>
                  <div style="font-size: 14px">工艺配方条件</div>
                  <el-checkbox-group v-model="item.checkList2">
                    <el-checkbox
                      :label="index"
                      v-for="(data, index) in item.formulaParameter"
                      :key="data.key"
                      >{{ data.key }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span class="dialog-footer flex-x flex-right" style="padding-right: 20px">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button
          :loading="btnLoading"
          size="small"
          type="primary"
          @click="handleSubmit"
          >确 定</el-button
        >
      </span>
    </div>
  </el-drawer>
</template>

<script>
import { getTemplate, tasks2formula } from "@/api/technology";
export default {
  props: {
    taskIdList: {
      type: Array,
      default: [],
    },
    show: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      btnLoading: false,
      checkboxGroup1: ["template"],
      checkboxGroup2: [],
      basicsList2: [
        {
          name: "设备类型",
          id: "deviceTypeToken",
        },
        {
          name: "设备",
          id: "deviceToken",
        },
      ],
      basicsList1: [
        {
          name: "工艺模板",
          id: "template",
        },
        {
          name: "零件类型",
          id: "partNumber",
        },
        {
          name: "工序号",
          id: "processNumber",
        },
      ],
      activeTabName: "first",
      list: [],
      activeNames: "",
      direction: "rtl",
      tabPosition: "left",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    setCheck(arr, id, item) {
      return arr.map((m) => {
        return {
          index: m,
          templateId: id,
          type: item[m].type, //单值条件
        };
      });
    },
    handleSubmit() {
      let condition_3 = [];
      let condition_4 = [];
      this.list.forEach((item) => {
        condition_3 = condition_3.concat(
          this.setCheck(item.checkList1, item.id, item.technologyParameter)
        );
        condition_4 = condition_4.concat(
          this.setCheck(item.checkList2, item.id, item.formulaParameter)
        );
      });
      const form = {
        condition_1: this.checkboxGroup1,
        condition_2: this.checkboxGroup2,
        condition_3,
        condition_4,
        taskIdList: this.taskIdList,
      };
      console.log("this.list :>> ", this.taskIdList, form);
      this.btnLoading = true;
      tasks2formula(form)
        .then((res) => {
          console.log("res :>> ", res);
          this.$msg({
            message: "提交成功",
            type: "success",
          });
          this.handleClose();
          this.checkboxGroup1 = ["template"];
          this.checkboxGroup2 = [];
          this.list = this.list.map((item) => {
            return {
              ...item,
              checkList1: [],
              checkList2: [],
            };
          });
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },
    handleChange() {},
    handleClose() {
      this.$emit("handleClose");
    },
    //获取模板列表
    init() {
      this.params = {
        page: 1,
        pageSize: 100,
      };

      getTemplate(this.params)
        .then((r) => {
          const { data } = r;
          // data.results = data.results.filter((item) => item.state == "true");
          this.list = data.results.map((item) => {
            return {
              ...item,
              checkList1: [],
              checkList2: [],
            };
          });
        })
        .finally((f) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang='scss' scoped>
.check_data {
  .line_furnace {
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  /* margin-left: 20px; */
  /* /deep/ .el-checkbox {
    width: 28%;
  }
  /deep/ .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0;
  } */
}
.furnace_drawer {
  padding: 0 20px 0 0;
  .img {
    width: 26px;
    height: 26px;
    margin-right: 8px;
  }
}
</style>